<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<div class="container-fluid" id="deployHistoryList">
  <div class="modal-body">
    <div ng-cloak="" class="tabsdemoDynamicHeight">
      <md-content>
        <md-tabs md-dynamic-height="" md-border-bottom="">
          <md-tab label="Topic">
            <md-content class="md-padding" style="min-height:600px">
              <h5 class="md-display-5">Only Return 2000 Messages</h5>
              <div class="row">
                <form class="form-inline pull-left col-sm-12">
                  <div class="form-group">
                    <label>{{'TOPIC' | translate}}:</label>
                  </div>
                  <div class="form-group ">
                    <div style="width: 300px">
                      <select name="mySelectTopic" chosen
                              ng-model="selectedTopic"
                              ng-options="item for item in allTopicList"
                              required>
                        <option value=""></option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group ">
                    <label>{{'BEGIN' | translate}}:</label>
                    <div class="input-group">
                      <input class="form-control" datetimepicker ng-model="timepickerBegin"
                             options="timepickerOptions"/>
                      <span class="input-group-addon"><span
                              class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label>{{'END' | translate}}:</label>
                    <div class="input-group">
                      <input class="form-control" datetimepicker ng-model="timepickerEnd"
                             options="timepickerOptions"/>
                      <span class="input-group-addon"><span
                              class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                  </div>
                  <button id="searchAppsButton" type="button"
                          class="btn btn-raised btn-sm  btn-primary"
                          data-toggle="modal"
                          ng-click="queryMessageByTopic()">
                    <span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
                  </button>
                </form>
                <table class="table table-bordered">
                  <tr>
                    <th class="text-center">Message ID</th>
                    <th class="text-center">Tag</th>
                    <th class="text-center">Key</th>
                    <th class="text-center">StoreTime</th>
                    <th class="text-center">Operation</th>
                  </tr>
                  <tr ng-repeat="item in messageShowList">
                    <td class="text-center">{{item.msgId}}</td>
                    <td class="text-center">{{item.properties.TAGS}}</td>
                    <td class="text-center">{{item.properties.KEYS}}</td>
                    <td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
                    </td>
                    <td class="text-center">
                      <button class="btn btn-raised btn-sm btn-primary" type="button"
                              ng-click="queryMessageByMessageId(item.msgId,item.topic)">Message
                        Detail
                      </button>
                    </td>
                  </tr>
                </table>
                <tm-pagination conf="paginationConf"></tm-pagination>
              </div>
            </md-content>
          </md-tab>
          <md-tab label="Message Key">
            <md-content class="md-padding" style="min-height:600px">
              <h5 class="md-display-5">Only Return 64 Messages</h5>

              <form class="form-inline pull-left col-sm-12">
                <div class="form-group">
                  <label>Topic:</label>
                </div>
                <div class="form-group">
                  <div style="width: 300px">
                    <select name="mySelectTopic" chosen
                            ng-model="selectedTopic"
                            ng-options="item for item in allTopicList"
                            required>
                      <option value=""></option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label>Key:</label>
                  <input class="form-control" style="width: 450px" type="text" ng-model="key"
                         required/>
                </div>

                <button type="button" class="btn btn-raised btn-sm  btn-primary" data-toggle="modal"
                        ng-click="queryMessageByTopicAndKey()">
                  <span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
                </button>
              </form>
              <table class="table table-bordered">
                <tr>
                  <th class="text-center">Message ID</th>
                  <th class="text-center">Tag</th>
                  <th class="text-center">Key</th>
                  <th class="text-center">StoreTime</th>
                  <th class="text-center">Operation</th>
                </tr>
                <tr ng-repeat="item in queryMessageByTopicAndKeyResult">
                  <td class="text-center">{{item.msgId}}</td>
                  <td class="text-center">{{item.properties.TAGS}}</td>
                  <td class="text-center">{{item.properties.KEYS}}</td>
                  <td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
                  </td>
                  <td class="text-center">
                    <button class="btn btn-raised btn-sm btn-primary" type="button"
                            ng-click="queryMessageByMessageId(item.msgId,item.topic)">Message Detail
                    </button>
                  </td>
                </tr>
              </table>
            </md-content>
          </md-tab>
          <md-tab label="Message ID">
            <h5 class="md-display-5">topic can't be empty if you producer client version>=v3.5.8</h5>
            <md-content class="md-padding" style="min-height:600px">
              <form class="form-inline pull-left col-sm-12">
                <div class="form-group">
                  <label>Topic:</label>
                </div>
                <div class="form-group ">
                  <div style="width: 300px">
                    <select name="mySelectTopic" chosen
                            ng-model="selectedTopic"
                            ng-options="item for item in allTopicList"
                            required>
                      <option value=""></option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label>MessageId:</label>
                  <input class="form-control" style="width: 450px" type="text" ng-model="messageId"
                         required/>
                </div>
                <button type="button" class="btn btn-raised btn-sm  btn-primary" data-toggle="modal"
                        ng-click="queryMessageByMessageId(messageId,selectedTopic)">
                  <span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
                </button>
              </form>
            </md-content>
          </md-tab>
        </md-tabs>
      </md-content>
    </div>

  </div>
</div>


<script type="text/ng-template" id="messageDetailViewDialog">
  <md-content class="md-padding">
    <div>
      <form id="addAppForm" name="addAppForm" class="form-horizontal" novalidate>
        <div class="form-group">
          <label class="control-label col-sm-2">Message ID:</label>
          <div class="col-sm-10">
            <label class="form-control">{{ngDialogData.messageView.msgId}}</label>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2">Topic:</label>
          <div class="col-sm-10">
            <label class="form-control">{{ngDialogData.messageView.topic}}</label>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2">Tag:</label>
          <div class="col-sm-10">
            <label class="form-control">{{ngDialogData.messageView.properties.TAGS}}</label>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2">Key:</label>
          <div class="col-sm-10">
            <label class="form-control">{{ngDialogData.messageView.properties.KEYS}}</label>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2">Storetime:</label>
          <div class="col-sm-10">
            <label class="form-control">{{ngDialogData.messageView.storeTimestamp | date:'yyyy-MM-dd
              HH:mm:ss'}}</label>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2">Message body:</label>
          <div class="col-sm-10">
                        <textarea class="form-control"
                                  ng-model="ngDialogData.messageView.messageBody"
                                  style="min-height:200px; resize: none"
                                  readonly></textarea>
          </div>
        </div>
      </form>
    </div>
    <label>messageTrackList:</label>
    <table class="table-bordered md-padding">
      <tr>
        <th class="text-center">consumerGroup</th>
        <th class="text-center">trackType</th>
        <!--<th class="text-center">exceptionDesc</th>-->
        <th class="text-center">Operation</th>
      </tr>
      <tr ng-repeat="item in ngDialogData.messageTrackList">
        <td class="text-center">{{item.consumerGroup}}</td>
        <td class="text-center">{{item.trackType}}</td>
        <td class="text-center">
          <button class="btn btn-raised btn-sm btn-primary" type="button"
                  ng-click="resendMessage(ngDialogData.messageView.msgId,ngDialogData.messageView.topic,item.consumerGroup)">
            Resend Message
          </button>
          <button class="btn btn-raised btn-sm btn-primary" type="button"
                  ng-click="showExceptionDesc(item.exceptionDesc)">
            View Exception
          </button>
        </td>
      </tr>
    </table>
  </md-content>
  <div class="ngdialog-buttons">
    <button type="button" class="ngdialog-button ngdialog-button-secondary"
            ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
    </button>
  </div>
</script>

<script type="text/ng-template" id="operationResultDialog">
  <div class="modal-header">
    <h4 class="modal-title">Result</h4>
  </div>
  <div class="modal-body ">
    <form class="form-horizontal" novalidate>
      {{ngDialogData.result}}
    </form>
  </div>
  <div class="modal-footer">
    <div class="ngdialog-buttons">
      <button type="button" class="ngdialog-button ngdialog-button-secondary"
              ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
      </button>
    </div>
  </div>
</script>